import React from 'react';
import './index.css';
import mzsdk from '../../../../utils/mzsdk'
import { Toast } from 'antd-mobile';

/**
 * 文档组件
 */

var content_height = 0;

export default class Document extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            //直播/断流的时候使用
            currentPic: null,

            //未开播和回放的时候使用
            isShowList: false,
            data: [],//文档列表
            currentDocumentInfo: null,//当前展示的文档ID和名字
            image_urls: [],//当前展示的文档的图片列表
            currentIndex: 0,//当前展示的文档的图片索引
            isEnlarge: [],//放大的图片的索引
        }
    }

    componentWillUnmount() {
        mzsdk.mzee.off('live-update-document-url')
        mzsdk.mzee.off('update-document-frame')
        mzsdk.mzee.off('doc-request-data')
    }

    componentDidMount() {
        var _this = this;
        mzsdk.mzee.on('live-update-document-url', function (e) {
            _this.setState({
                currentPic: e
            })
        })
        mzsdk.mzee.on('update-document-frame', function () {
            _this.fixViewFrame()

        })
        mzsdk.mzee.on('doc-request-data', function () {
            _this.getDocumentList()
        });
        setTimeout(() => {
            this.fixViewFrame();
        }, 1000);
    }
    //获取文件列表
    getDocumentList = () => {
        var _this = this;
        mzsdk.doc.getFileList().then(data => {
            console.log("获取文件列表：", data);
            if (data && data.length > 0) {
                _this.setState({
                    data: data,
                    currentDocumentInfo: data[0]
                }, () => {
                    _this.getDocumentInfo(_this.state.currentDocumentInfo.id)
                })
            }
        }, (error) => {
            Toast.info(error.msg, 1.5)
        });
    }

    //获取文件详情
    getDocumentInfo = (id) => {
        if (!id || id.length <= 0) {
            Toast.info('文档ID不能为空', 1.5)
            return;
        }
        var _this = this;
        mzsdk.doc.getFileInfo(id).then(data => {
            console.log("获取文件信息：", data);
            _this.setState({
                currentIndex: 0,
                isEnlarge: [],
                image_urls: data
            })
        }, (error) => {
            Toast.info(error.msg, 1.5)
        });
    }

    clickBut = (type) => {
        let { currentIndex } = this.state;
        var _this = this;
        switch (type) {
            case 'left':
                currentIndex -= 1;
                _this.setState({
                    currentIndex: currentIndex
                })
                var isEnlarge = _this.state.isEnlarge;
                if (isEnlarge.findIndex(t => t === currentIndex) > -1) {
                    _this.enlarge();
                } else {
                    _this.narrow();
                }
                break;
            case 'right':
                currentIndex += 1;
                _this.setState({
                    currentIndex: currentIndex
                })
                var isEnlarge = _this.state.isEnlarge;
                if (isEnlarge.findIndex(t => t === currentIndex) > -1) {
                    _this.enlarge();
                } else {
                    _this.narrow();
                }
                break;
            case 'narrow':
                _this.narrow();
                var isEnlarge = _this.state.isEnlarge;
                let index = isEnlarge.findIndex(t => t === currentIndex);
                if (index > -1) {
                    isEnlarge.splice(index, 1)
                    _this.setState({
                        isEnlarge: isEnlarge
                    })
                }
                break;
            case 'enlarge':
                _this.enlarge()
                var isEnlarge = _this.state.isEnlarge;
                if (isEnlarge.findIndex(t => t === currentIndex) > -1) {
                    return;
                }
                isEnlarge.push(currentIndex)
                _this.setState({
                    isEnlarge: isEnlarge
                })
                break;
            default:
                break;
        }
    }

    narrow = () => {
        var documentPic = document.getElementsByClassName('document-playback-pic')[0]
        if (documentPic) {
            documentPic.style.height = '99%'
            documentPic.style.width = '99%'
        }
    }

    enlarge = () => {
        var documentPic = document.getElementsByClassName('document-playback-pic')[0]
        if (documentPic) {
            documentPic.style.width = 'auto'
            documentPic.style.height = 'auto'
        }
    }
    // 批量下载文件
    batchDownloadMethod = (urls) => {
        var _this = this;
        if (urls && urls.length > 0) {
            urls.forEach(function (url, index) {
                fetch(url).then(res => res.blob().then(blob => {
                    var a = document.createElement('a');
                    var url = window.URL.createObjectURL(blob);
                    var filename = _this.state.currentDocumentInfo.file_name + '_' + (index + 1);
                    a.href = url;
                    a.download = filename;
                    a.click();
                    window.URL.revokeObjectURL(url);
                }))
            })
        }
    }

    fixViewFrame = () => {
        let window_height = window.innerHeight

        var video = document.getElementById('main-top-video-super-background')
        var rollingView = document.getElementById('rolling-ad-background')
        var menuView = document.getElementById('tab-menu-background')

        if (!video || !rollingView || !menuView) {
            return;
        }
        let height = (window_height - video.clientHeight - rollingView.clientHeight - menuView.clientHeight - 1) + 'px'

        var documentBackground = document.getElementsByClassName('document-background')[0]
        if (documentBackground) {
            documentBackground.style.height = height
        }

        var playbackMenu = document.getElementsByClassName('document-playback-menu')[0]

        let contentHeight = window_height - video.clientHeight - rollingView.clientHeight - menuView.clientHeight - 1 - (playbackMenu ? playbackMenu.clientHeight : 0)

        var playbackContent = document.getElementsByClassName('document-playback-content')[0]
        if (playbackContent) {
            playbackContent.style.height = contentHeight + 'px'
            content_height = contentHeight + 'px'
        }
    }

    render() {
        let { currentPic, isShowList, currentDocumentInfo, data, image_urls, currentIndex, topIndexTop } = this.state;
        return (
            <div className="document-background" style={{ display: currentPic ? 'flex' : 'block', justifyContent: currentPic ? 'center' : 'normal', alignItems: currentPic ? 'center' : 'normal' }}>
                {
                    this.props.ticketInfo ? <div>
                        {
                            (this.props.ticketInfo.status == 1 || this.props.ticketInfo.status == 3) ?
                                <div>
                                    {
                                        currentPic ?
                                            <img style={{ objectFit: 'contain', maxWidth: '100%', maxHeight: '100%', overflow: 'auto' }} src={currentPic || ""} /> :
                                            <div style={{ display: 'flex', justifyContent: 'center', paddingTop: '2rem' }}>暂无文档</div>
                                    }
                                </div> :
                                <div className="document-playback-background">
                                    {
                                        data.length > 0 ?
                                            <div>
                                                <div className="document-playback-menu">
                                                    <img className="document-playback-button" src={require('../../../../assets/images/doc-list-download-icon.png')} onClick={() => { this.setState({ isShowList: !isShowList }), this.fixViewFrame() }}></img>
                                                    <div className="document-playback-menu-title">{currentDocumentInfo ? currentDocumentInfo.file_name : '文档名字'}</div>
                                                </div>
                                                {
                                                    isShowList ?
                                                        <ul className="document-playback-list">
                                                            {
                                                                data.map((item, index) => {
                                                                    return <li key={index} onClick={() => { this.setState({ currentDocumentInfo: item, isShowList: !this.state.isShowList }, () => { this.getDocumentInfo(item.id) }) }} style={{ color: (currentDocumentInfo && item.id == currentDocumentInfo.id) ? '#ff5b29' : '#2b2b2b' }}>{item.file_name}</li>
                                                                })
                                                            }
                                                        </ul> :
                                                        <div className="document-playback-content" style={{height: content_height != 0 ? content_height : '0px'}}>
                                                            <div className="document-playback-image-background">
                                                                <img className={"document-playback-pic"} src={image_urls && image_urls.length > 0 && image_urls.length > currentIndex ? image_urls[currentIndex] : ''}></img>
                                                            </div>
                                                            <div className="document-playback-top-index">{currentIndex + 1}/{image_urls.length}</div>
                                                            <button className="document-playback-left" onClick={this.clickBut.bind(this, 'left')} style={{ display: currentIndex == 0 ? 'none' : 'block' }}></button>
                                                            <button className="document-playback-right" onClick={this.clickBut.bind(this, 'right')} style={{ display: image_urls && image_urls.length > 0 && currentIndex == image_urls.length - 1 ? 'none' : 'block' }}></button>
                                                            <button className="document-playback-narrow" onClick={this.clickBut.bind(this, 'narrow')}></button>
                                                            <button className="document-playback-enlarge" onClick={this.clickBut.bind(this, 'enlarge')}></button>
                                                        </div>
                                                }
                                            </div> :
                                            <div style={{ display: 'flex', justifyContent: 'center', paddingTop: '2rem' }}>暂无文档</div>
                                    }
                                </div>
                        }
                    </div> :
                        <div style={{ display: 'flex', justifyContent: 'center', paddingTop: '2rem' }}>暂无文档</div>
                }
            </div>

        )
    }
}
